import { useState } from 'react';

export function DogImage(props: { num: number }) {
  const [src, setSrc] = useState('');

  async function loadDogImage() {
    const res = await import(`../assets/dog${props.num}.jpeg`);
    setSrc(res.default);
  }

  return src ? (
    <img src={src} alt="Dog" />
  ) : (
    <div className="loader">
      <button onClick={loadDogImage}>Click to load image</button>
    </div>
  );
}
